<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" >
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <title>座位预约页面</title>
    <link href="css/styles.css" th:href="@{/css/styles.css}" rel="stylesheet"/>
    <link href="css/dataTables.bootstrap4.min.css" th:href="@{/css/dataTables.bootstrap4.min.css}" rel="stylesheet" crossorigin="anonymous">
    <script src="js/all.min.js" th:src="@{/js/all.min.js}" crossorigin="anonymous"></script>
    <link href="layui-v2.5.6/layui/css/layui.css" th:href="@{/webjars/layui/2.5.6/css/layui.css}" rel="stylesheet">
    <link href="layui-v2.5.6/layui/css/modules/laydate/default/laydate.css" th:href="@{/webjars/layui/2.5.6/css/modules/laydate/default/laydate.css}" rel="stylesheet">
</head>
<body class="sb-nav-fixed">
<!--公共部分-->
<div th:replace="commons/bar::topbar"></div>
<div id="layoutSidenav">
    <div id="layoutSidenav_nav">
        <div th:replace="commons/bar::sidebar"></div>
    </div>

    <div id="layoutSidenav_content">
        <main>
            <div class="container-fluid">
                <h1 class="mt-4">座位信息操作</h1>
                <ol class="breadcrumb mb-4">
                    <li class="breadcrumb-item"><a th:href="@{/user22}">主页</a></li>
                    <li class="breadcrumb-item active">座位信息</li>
                </ol>
                <div class="card mb-4">
                    <div class="card-header"><i class="fas fa-user" aria-hidden="true"></i>座位信息</div>
                    <div class="card-body">
                        <div class="table-responsive">

                            <div class="row">
                                <div class="card  mr-xl-3 mb-2 text-light text-center bg-info font-weight-bold" style="margin-left: 14px" th:width="60px">
                                    <div class="card-header">座位 <i class="fas fa-arrow-right" aria-hidden="true"></i></div>
                                    <div class="card-header text-warning">房间号: 1</div>
                                    <div class="card-footer">操作 <i class="fas fa-arrow-right" aria-hidden="true"></i></div>
                                </div>

                                <div th:width="60px" class="mr-xl-3" style="margin-left: 10px"  th:each="seat:${seats}" th:if="${seat.roomid==4001}">
                                    <div class="card text-white mb-2" th:classappend="${'bg-success'}" th:if="${seat.seatstate=='1'}" style="max-width: 15rem;">
                                        <div class="card-header text-center"><span th:text="${seat.seatid}"></span></div>
                                        <div class="card-header text-center">
                                            <a class="text-warning"  th:text="${'已预约'}"></a>
                                        </div>
                                        <div class="card-footer bg-success deleteSeatResver" >
                                            <button type="text" class="bg-success text-warning" th:attr="seat_id=${seat.seatid}" style="border: none">取消预约</button>
                                        </div>
                                    </div>
                                    <div class="card text-white  mb-2" th:classappend="${'bg-secondary'}" th:if="${seat.seatstate=='0'}" style="max-width: 15rem;">
                                        <div class="card-header text-center"><span th:text="${seat.seatid}"></span></div>
                                        <div class="card-header text-center resver" >
                                            <button class="card-text bg-secondary text-white"
                                                    style="border: none" th:attr="seat_id=${seat.seatid},status=${'可预约'}"  th:text="${'可预约'}" ></button>
                                        </div>
                                        <div class="card-footer text-center resver" >
                                            <button class="card-text bg-secondary text-white"
                                                    style="border: none" th:attr="seat_id=${seat.seatid},status=${'立即上座'}">立即上座</button>
                                        </div>
                                    </div>
                                    <div class="card text-white  mb-2" th:classappend="${'bg-danger'}" th:if="${seat.seatstate=='2'}" style="max-width: 15rem;">
                                        <div class="card-header text-center"><span th:text="${seat.seatid}"></span></div>
                                        <div class="card-header" >
                                            <a class="card-text bg-danger  text-white"
                                                    style="border: none" th:attr="seat_id=${seat.seatid}"  th:text="${'该座有人'}" ></a>
                                        </div>
                                        <div class="card-footer bg-danger text-center deleteSeatResver" >
                                            <button type="text" class="bg-danger text-white" th:attr="seat_id=${seat.seatid}" style="border: none">退座</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!---------------------------------------------------------------------------------->
                            <div class="row">
                                <div class="card  mr-xl-3 mb-2 text-light text-center bg-info font-weight-bold" style="margin-left: 14px" th:width="60px">
                                    <div class="card-header">座位 <i class="fas fa-arrow-right" aria-hidden="true"></i></div>
                                    <div class="card-header text-warning">房间号: 2</div>
                                    <div class="card-footer">操作 <i class="fas fa-arrow-right" aria-hidden="true"></i></div>
                                </div>

                                <div th:width="60px" class="mr-xl-3" style="margin-left: 10px"  th:each="seat:${seats}" th:if="${seat.roomid==4002}">
                                    <div class="card text-white mb-2" th:classappend="${'bg-success'}" th:if="${seat.seatstate=='1'}" style="max-width: 15rem;">
                                        <div class="card-header text-center"><span th:text="${seat.seatid}"></span></div>
                                        <div class="card-header text-center">
                                            <a class="text-warning"  th:text="${'已预约'}"></a>
                                        </div>
                                        <div class="card-footer bg-success deleteSeatResver" >
                                            <button type="text" class="bg-success text-warning" th:attr="seat_id=${seat.seatid}" style="border: none">取消预约</button>
                                        </div>
                                    </div>
                                    <div class="card text-white  mb-2" th:classappend="${'bg-secondary'}" th:if="${seat.seatstate=='0'}" style="max-width: 15rem;">
                                        <div class="card-header text-center"><span th:text="${seat.seatid}"></span></div>
                                        <div class="card-header text-center resver" >
                                            <button class="card-text bg-secondary text-white"
                                                    style="border: none" th:attr="seat_id=${seat.seatid},status=${'可预约'}"  th:text="${'可预约'}" ></button>
                                        </div>
                                        <div class="card-footer text-center resver" >
                                            <button class="card-text bg-secondary text-white"
                                                    style="border: none" th:attr="seat_id=${seat.seatid},status=${'立即上座'}">立即上座</button>
                                        </div>
                                    </div>
                                    <div class="card text-white  mb-2" th:classappend="${'bg-danger'}" th:if="${seat.seatstate=='2'}" style="max-width: 15rem;">
                                        <div class="card-header text-center"><span th:text="${seat.seatid}"></span></div>
                                        <div class="card-header" >
                                            <a class="card-text bg-danger  text-white"
                                               style="border: none" th:attr="seat_id=${seat.seatid}"  th:text="${'该座有人'}" ></a>
                                        </div>
                                        <div class="card-footer bg-danger text-center deleteSeatResver" >
                                            <button type="text" class="bg-danger text-white" th:attr="seat_id=${seat.seatid}" style="border: none">退座</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!---------------------------------------------------------------------------------->
                            <div class="row">
                                <div class="card  mr-xl-3 mb-2 text-light text-center bg-info font-weight-bold" style="margin-left: 14px" th:width="60px">
                                    <div class="card-header">座位 <i class="fas fa-arrow-right" aria-hidden="true"></i></div>
                                    <div class="card-header text-warning">房间号: 3</div>
                                    <div class="card-footer">操作 <i class="fas fa-arrow-right" aria-hidden="true"></i></div>
                                </div>

                                <div th:width="60px" class="mr-xl-3" style="margin-left: 10px"  th:each="seat:${seats}" th:if="${seat.roomid==4003}">
                                    <div class="card text-white mb-2" th:classappend="${'bg-success'}" th:if="${seat.seatstate=='1'}" style="max-width: 15rem;">
                                        <div class="card-header text-center"><span th:text="${seat.seatid}"></span></div>
                                        <div class="card-header text-center">
                                            <a class="text-warning"  th:text="${'已预约'}"></a>
                                        </div>
                                        <div class="card-footer bg-success deleteSeatResver" >
                                            <button type="text" class="bg-success text-warning" th:attr="seat_id=${seat.seatid}" style="border: none">取消预约</button>
                                        </div>
                                    </div>
                                    <div class="card text-white  mb-2" th:classappend="${'bg-secondary'}" th:if="${seat.seatstate=='0'}" style="max-width: 15rem;">
                                        <div class="card-header text-center"><span th:text="${seat.seatid}"></span></div>
                                        <div class="card-header text-center resver" >
                                            <button class="card-text bg-secondary text-white"
                                                    style="border: none" th:attr="seat_id=${seat.seatid},status=${'可预约'}"  th:text="${'可预约'}" ></button>
                                        </div>
                                        <div class="card-footer text-center resver" >
                                            <button class="card-text bg-secondary text-white"
                                                    style="border: none" th:attr="seat_id=${seat.seatid},status=${'立即上座'}">立即上座</button>
                                        </div>
                                    </div>
                                    <div class="card text-white  mb-2" th:classappend="${'bg-danger'}" th:if="${seat.seatstate=='2'}" style="max-width: 15rem;">
                                        <div class="card-header text-center"><span th:text="${seat.seatid}"></span></div>
                                        <div class="card-header" >
                                            <a class="card-text bg-danger  text-white"
                                               style="border: none" th:attr="seat_id=${seat.seatid}"  th:text="${'该座有人'}" ></a>
                                        </div>
                                        <div class="card-footer bg-danger text-center deleteSeatResver" >
                                            <button type="text" class="bg-danger text-white" th:attr="seat_id=${seat.seatid}" style="border: none">退座</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!---------------------------------------------------------------------------------->
                            <div class="row">
                                <div class="card  mr-xl-3 mb-2 text-light text-center bg-info font-weight-bold" style="margin-left: 14px" th:width="60px">
                                    <div class="card-header">座位 <i class="fas fa-arrow-right" aria-hidden="true"></i></div>
                                    <div class="card-header text-warning">房间号: 4</div>
                                    <div class="card-footer">操作 <i class="fas fa-arrow-right" aria-hidden="true"></i></div>
                                </div>

                                <div th:width="60px" class="mr-xl-3" style="margin-left: 10px"  th:each="seat:${seats}" th:if="${seat.roomid==4004}">
                                    <div class="card text-white mb-2" th:classappend="${'bg-success'}" th:if="${seat.seatstate=='1'}" style="max-width: 15rem;">
                                        <div class="card-header text-center"><span th:text="${seat.seatid}"></span></div>
                                        <div class="card-header text-center">
                                            <a class="text-warning"  th:text="${'已预约'}"></a>
                                        </div>
                                        <div class="card-footer bg-success deleteSeatResver" >
                                            <button type="text" class="bg-success text-warning" th:attr="seat_id=${seat.seatid}" style="border: none">取消预约</button>
                                        </div>
                                    </div>
                                    <div class="card text-white  mb-2" th:classappend="${'bg-secondary'}" th:if="${seat.seatstate=='0'}" style="max-width: 15rem;">
                                        <div class="card-header text-center"><span th:text="${seat.seatid}"></span></div>
                                        <div class="card-header text-center resver" >
                                            <button class="card-text bg-secondary text-white"
                                                    style="border: none" th:attr="seat_id=${seat.seatid},status=${'可预约'}"  th:text="${'可预约'}" ></button>
                                        </div>
                                        <div class="card-footer text-center resver" >
                                            <button class="card-text bg-secondary text-white"
                                                    style="border: none" th:attr="seat_id=${seat.seatid},status=${'立即上座'}">立即上座</button>
                                        </div>
                                    </div>
                                    <div class="card text-white  mb-2" th:classappend="${'bg-danger'}" th:if="${seat.seatstate=='2'}" style="max-width: 15rem;">
                                        <div class="card-header text-center"><span th:text="${seat.seatid}"></span></div>
                                        <div class="card-header" >
                                            <a class="card-text bg-danger  text-white"
                                               style="border: none" th:attr="seat_id=${seat.seatid}"  th:text="${'该座有人'}" ></a>
                                        </div>
                                        <div class="card-footer bg-danger text-center deleteSeatResver" >
                                            <button type="text" class="bg-danger text-white" th:attr="seat_id=${seat.seatid}" style="border: none">退座</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!---------------------------------------------------------------------------------->
                            <div class="row">
                                <div class="card  mr-xl-3 mb-2 text-light text-center bg-info font-weight-bold" style="margin-left: 14px" th:width="60px">
                                    <div class="card-header">座位 <i class="fas fa-arrow-right" aria-hidden="true"></i></div>
                                    <div class="card-header text-warning">房间号: 5</div>
                                    <div class="card-footer">操作 <i class="fas fa-arrow-right" aria-hidden="true"></i></div>
                                </div>

                                <div th:width="60px" class="mr-xl-3" style="margin-left: 10px"  th:each="seat:${seats}" th:if="${seat.roomid==4005}">
                                    <div class="card text-white mb-2" th:classappend="${'bg-success'}" th:if="${seat.seatstate=='1'}" style="max-width: 15rem;">
                                        <div class="card-header text-center"><span th:text="${seat.seatid}"></span></div>
                                        <div class="card-header text-center">
                                            <a class="text-warning"  th:text="${'已预约'}"></a>
                                        </div>
                                        <div class="card-footer bg-success deleteSeatResver" >
                                            <button type="text" class="bg-success text-warning" th:attr="seat_id=${seat.seatid}" style="border: none">取消预约</button>
                                        </div>
                                    </div>
                                    <div class="card text-white  mb-2" th:classappend="${'bg-secondary'}" th:if="${seat.seatstate=='0'}" style="max-width: 15rem;">
                                        <div class="card-header text-center"><span th:text="${seat.seatid}"></span></div>
                                        <div class="card-header text-center resver" >
                                            <button class="card-text bg-secondary text-white"
                                                    style="border: none" th:attr="seat_id=${seat.seatid},status=${'可预约'}"  th:text="${'可预约'}" ></button>
                                        </div>
                                        <div class="card-footer text-center resver" >
                                            <button class="card-text bg-secondary text-white"
                                                    style="border: none" th:attr="seat_id=${seat.seatid},status=${'立即上座'}">立即上座</button>
                                        </div>
                                    </div>
                                    <div class="card text-white  mb-2" th:classappend="${'bg-danger'}" th:if="${seat.seatstate=='2'}" style="max-width: 15rem;">
                                        <div class="card-header text-center"><span th:text="${seat.seatid}"></span></div>
                                        <div class="card-header" >
                                            <a class="card-text bg-danger  text-white"
                                               style="border: none" th:attr="seat_id=${seat.seatid}"  th:text="${'该座有人'}" ></a>
                                        </div>
                                        <div class="card-footer bg-danger text-center deleteSeatResver" >
                                            <button type="text" class="bg-danger text-white" th:attr="seat_id=${seat.seatid}" style="border: none">退座</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!---------------------------------------------------------------------------------->
                            <div class="row">
                                <div class="card  mr-xl-3 mb-2 text-light text-center bg-info font-weight-bold" style="margin-left: 14px" th:width="60px">
                                    <div class="card-header">座位 <i class="fas fa-arrow-right" aria-hidden="true"></i></div>
                                    <div class="card-header text-warning">房间号: 6</div>
                                    <div class="card-footer">操作 <i class="fas fa-arrow-right" aria-hidden="true"></i></div>
                                </div>

                                <div th:width="60px" class="mr-xl-3" style="margin-left: 10px"  th:each="seat:${seats}" th:if="${seat.roomid==4006}">
                                    <div class="card text-white mb-2" th:classappend="${'bg-success'}" th:if="${seat.seatstate=='1'}" style="max-width: 15rem;">
                                        <div class="card-header text-center"><span th:text="${seat.seatid}"></span></div>
                                        <div class="card-header text-center">
                                            <a class="text-warning"  th:text="${'已预约'}"></a>
                                        </div>
                                        <div class="card-footer bg-success deleteSeatResver" >
                                            <button type="text" class="bg-success text-warning" th:attr="seat_id=${seat.seatid}" style="border: none">取消预约</button>
                                        </div>
                                    </div>
                                    <div class="card text-white  mb-2" th:classappend="${'bg-secondary'}" th:if="${seat.seatstate=='0'}" style="max-width: 15rem;">
                                        <div class="card-header text-center"><span th:text="${seat.seatid}"></span></div>
                                        <div class="card-header text-center resver" >
                                            <button class="card-text bg-secondary text-white"
                                                    style="border: none" th:attr="seat_id=${seat.seatid},status=${'可预约'}"  th:text="${'可预约'}" ></button>
                                        </div>
                                        <div class="card-footer text-center resver" >
                                            <button class="card-text bg-secondary text-white"
                                                    style="border: none" th:attr="seat_id=${seat.seatid},status=${'立即上座'}">立即上座</button>
                                        </div>
                                    </div>
                                    <div class="card text-white  mb-2" th:classappend="${'bg-danger'}" th:if="${seat.seatstate=='2'}" style="max-width: 15rem;">
                                        <div class="card-header text-center"><span th:text="${seat.seatid}"></span></div>
                                        <div class="card-header" >
                                            <a class="card-text bg-danger  text-white"
                                               style="border: none" th:attr="seat_id=${seat.seatid}"  th:text="${'该座有人'}" ></a>
                                        </div>
                                        <div class="card-footer bg-danger text-center deleteSeatResver" >
                                            <button type="text" class="bg-danger text-white" th:attr="seat_id=${seat.seatid}" style="border: none">退座</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!---------------------------------------------------------------------------------->
                        </div>
                    </div>
                </div>
            </div>
            <!--****************************************预约信息预览（表格）**********************************************-->
            <div class="container-fluid">

                <div class="card mb-4">
                    <div class="card-header">
                        <div class="row">
                            <div class="col-4">
                                <p><i class="fas fa-user" aria-hidden="true"></i>实时座位信息概览</p>
                            </div>
                            <div class="col-3">
                                <span class="text-danger" id="queryUserInfo"></span>
                            </div>
                            <div class="col-2">
                                <input type="text" placeholder="输入座位号" class="form-control" maxlength="16" id="queryBySeatID">
                            </div>
                            <div class="col-1">
                                <button type="button" class="btn btn-info" id="queryBySeatID_btn"><i class="fas fa-search" aria-hidden="true"></i>搜索</button>
                            </div>
                            <div class="col-2">
                                <button type="button" class="btn btn-info" id="queryAll"><i class="fas fa-search" aria-hidden="true"></i>查询全部</button>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
                                <thead class="thead-light">
                                <tr>
                                    <th>#</th>
                                    <th>用户账号</th>
                                    <th>座位号</th>
                                    <th>开始时间</th>
                                    <th>结束时间</th>
                                    <th>状态</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody id="seatResverInfo">
                                </tbody>
                            </table>
                            <!-- 分页条 -->
                            <div class="row">
                                <!-- 分页文字信息 -->
                                <div class="col-md-6" id="page_info_area">
                                    <!-- <h4>当前页第*页,总页码：,总记录：</h4> -->
                                </div>
                                <!-- 分页条信息 -->
                                <div class="col-md-6" id="page_nav_area"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
        <footer class="py-4 bg-light mt-auto">
            <div class="container-fluid">
                <div class="d-flex align-items-center justify-content-between small">
                    <div class="text-muted">Copyright &copy; Your Website 2020</div>
                    <div>
                        <a href="#">联系：m15952086301@163.com</a>
                    </div>
                </div>
            </div>
        </footer>
        <!-- 点击预约的模态框 -->
        <div class="modal fade" id="resverModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title" id="myModalLabel">填写信息</h4>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    </div>
                    <div class="modal-body">
                        <form class="form-horizontal">
                            <div class="form-group">
                                <span class="help-block text-danger" id="info"></span>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-4 control-label">用户ID</label>
                                <div class="col-sm-12">
                                    <input type="text" class="form-control" maxlength="4" id="userID_inpput" placeholder="请输入你的用户ID（四位）">
                                    <span class="help-block text-info" ></span>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-4 control-label">座位号</label>
                                <div class="col-sm-12">
                                    <input type="text"  class="form-control" id="seat_idval" disabled>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-4 control-label">开始时间</label>
                                <div class="col-sm-12">
                                    <input type="text" class="layui-input form-control" id="test5" placeholder="yyyy-MM-dd HH:mm:ss">
                                </div>
                            </div>


                            <div class="form-group">
                                <label class="col-sm-4 control-label">结束时间</label>
                                <div class="col-sm-12">
                                    <input type="text" class="layui-input form-control" id="test6" placeholder="yyyy-MM-dd HH:mm:ss">
                                </div>
                            </div>


                        </form>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                            <button type="button" class="btn btn-primary" id="save_btn">保存</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!--详细用户信息模态框-->
        <div class="modal fade" id="userModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="ModalLabel">用户信息</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form>
                            <div class="form-group row">
                                <label for="userName" class="col-sm-3 col-form-label text-danger">用户姓名：</label>
                                <div class="col-sm-7">
                                    <input type="text" readonly class="form-control-plaintext text-muted" id="userName">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="userAge" class="col-sm-3 col-form-label text-danger">用户年龄：</label>
                                <div class="col-sm-7">
                                    <input type="text" readonly class="form-control-plaintext text-muted" id="userAge">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="userGender" class="col-sm-3 col-form-label text-danger">用户性别：</label>
                                <div class="col-sm-7">
                                    <input type="text" readonly class="form-control-plaintext text-muted" id="userGender">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="userTel" class="col-sm-3 col-form-label text-danger">用户手机号：</label>
                                <div class="col-sm-7">
                                    <input type="text" readonly class="form-control-plaintext text-muted" id="userTel">
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
<script src="js/jquery-3.4.1.min.js" th:src="@{/js/jquery-3.4.1.min.js}" crossorigin="anonymous"></script>
<script src="js/bootstrap.bundle.min.js" th:src="@{/js/bootstrap.bundle.min.js}" crossorigin="anonymous"></script>
<script src="js/scripts.js" th:src="@{/js/scripts.js}"></script>
<script src="js/jquery.dataTables.min.js" th:src="@{/js/jquery.dataTables.min.js}" crossorigin="anonymous"></script>
<script src="js/dataTables.bootstrap4.min.js" th:src="@{/js/dataTables.bootstrap4.min.js}" crossorigin="anonymous"></script>
<script src="layui-v2.5.6/layui/lay/modules/laydate.js" th:src="@{/webjars/layui/2.5.6/lay/modules/laydate.js}"></script>
<!--<script src="js/datatables-demo.js" th:src="@{/js/datatables-demo.js}"></script>-->
<script src="layui-v2.5.6/layui/layui.js" th:src="@{/webjars/layui/2.5.6/layui.js}" charset="utf-8"></script>
<script type="text/javascript">
    $(function() {
        to_page(1);
    })
    function to_page(pn) {
        $.ajax({
            url:"/getSeatResverInfo",
            type:"GET",
            data:"pn="+pn,
            success:function(result){
                bulid_cp_table(result);
                //显示分页信息
                build_page_info(result);
                //解析并显示分页信息
                build_page_nav(result);
            }
        });
    }
    //表格数据
    function bulid_cp_table(result){
        //清空table表格数据
        $("#seatResverInfo").empty();
        var sr = result.extend.pageInfo.list;
        $.each(sr,function(index,item){
            var sridTd=$("<td></td>").append(item.resverid);
            var useridTd=$("<td></td>").append(item.userid);
            var seatidTd=$("<td></td>").append(item.seatid);
            var btime = new Date(item.btime).format("yyyy-MM-dd hh:mm:ss");
            var btimeTd=$("<td></td>").append(btime);
            var etime = new Date(item.etime).format("yyyy-MM-dd hh:mm:ss");
            var etimeTd=$("<td></td>").append(etime);
            var stateTd=$("<td></td>").append(item.state=='1'?'已预约':'已上座');
            var userBtn=$("<button></button>").addClass("btn btn-primary btn-sm user_btn")
                .append($("<span></span>").append("用户信息"));
            var btnTd=$("<td></td>").append(userBtn);
            userBtn.attr("user_id",item.userid);
            //append方法执行完成以后还是返回原来的元素
            $("<tr></tr>")
                .append(sridTd)
                .append(useridTd)
                .append(seatidTd)
                .append(btimeTd)
                .append(etimeTd)
                .append(stateTd)
                .append(btnTd)
                .appendTo("#seatResverInfo");
        });
    }

    /**************************分页信息********************************************************/
    //解析显示分页信息
    function build_page_info(result) {
        $("#page_info_area").empty();
        var page_area = result.extend.pageInfo;
        $("#page_info_area").append($("<h5></h5>").append("当前页："+page_area.pageNum+",总页数："+page_area.pages+",总记录数："+page_area.total));
        totalRecord = page_area.total;
        currentPage = page_area.pageNum;
    }
    //解析分页条数据，点击分页要能到下一页
    function build_page_nav(result){
        $("#page_nav_area").empty();
        var ul=$("<ul></ul>").addClass("pagination");
        var firstPageLi=$("<li></li>").append($("<a></a>").append("首页").addClass("page-link text-white bg-info"));
        var prePageLi=$("<li></li>").append($("<a></a>").addClass("page-link").append("&laquo;"));
        //如果不存在上一页，首页和上一页按钮禁用，如果存在上一页，可以进行点击事件（不会发请求）
        if(result.extend.pageInfo.hasPreviousPage==false){
            firstPageLi.addClass("disabled");
            prePageLi.addClass("disabled");
        }else{
            //点击事件
            firstPageLi.click(function(){
                to_page(1);
            });
            prePageLi.click(function(){
                to_page(result.extend.pageInfo.pageNum-1);
            });
        }
        var nextPageLi=$("<li></li>").append($("<a></a>").addClass("page-link").append("&raquo;"));
        var lastPageLi=$("<li></li>").append($("<a></a>").addClass("page-link").append("末页").addClass("page-link text-white bg-info"));
        if(result.extend.pageInfo.hasNextPage==false){
            nextPageLi.addClass("disabled");
            lastPageLi.addClass("disabled");
        }else{
            //点击事件
            nextPageLi.click(function(){
                to_page(result.extend.pageInfo.pageNum+1);
            });
            lastPageLi.click(function(){
                to_page(result.extend.pageInfo.pages);
            });
        }
        ul.append(firstPageLi).append(prePageLi);
        //遍历给UL中添加页码提示
        $.each(result.extend.pageInfo.navigatepageNums,function(index,item){
            var numLi=$("<li></li>").append($("<a></a>").addClass("page-link").append(item));
            if(result.extend.pageInfo.pageNum==item){
                numLi.addClass("text-primary");
            }
            numLi.click(function(){
                to_page(item);
            });
            ul.append(numLi);

        });
        ul.append(nextPageLi).append(lastPageLi);
        var navEle=$("<nav></nav>").append(ul);
        navEle.appendTo("#page_nav_area");
    }
    /***************************************分页信息*****************************************************/
    //日期格式
    Date.prototype.format = function(fmt) {
        var o = {
            "M+" : this.getMonth()+1,                 //月份
            "d+" : this.getDate(),                    //日
            "h+" : this.getHours(),                   //小时
            "m+" : this.getMinutes(),                 //分
            "s+" : this.getSeconds(),                 //秒
            "q+" : Math.floor((this.getMonth()+3)/3), //季度
            "S"  : this.getMilliseconds()             //毫秒
        };
        if(/(y+)/.test(fmt)) {
            fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
        }
        for(var k in o) {
            if(new RegExp("("+ k +")").test(fmt)){
                fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
            }
        }
        return fmt;
    }
        //点击保存，保存新增的管理员
        $("#save_btn").click(function () {
            var userID = $("#userID_inpput").val();
            var beginTime = $("#test5").val();
            var endTime = $("#test6").val();
            if (userID == "") {
                $("#info").text("请输入用户ID！");
                return false;
            }
            if (beginTime == "") {
                $("#info").text("请输入开始时间！");
                return false;
            }
            if (endTime == "") {
                $("#info").text("请输入结束时间！");
                return false;
            }

            if (userID != "" && beginTime != "" && endTime != "") {
                $("#info").text("");
            }
            //判断之前的ajax用户ID校验是否成功，如果成功继续，否则终止
            if ($(this).attr("ajax_userID") == "error") {
                return false;
            }
        });

        //显示校验的提示信息
        function show_validate_msg(ele, status, msg) {
            //清楚当前元素的校验状态
            $(ele).parent().removeClass("has-success has-error");
            $(ele).next("span").text();
            if ("success" == status) {
                $(ele).parent().addClass("has-success");
                $(ele).next("span").text(msg);
            } else if ("error" == status) {
                $(ele).parent().addClass("has-error");
                $(ele).next("span").text(msg);
            }
        }

        //清空表单样式以及内容
        function rest_form(ele) {
            $(ele)[0].reset();
            $(ele).find("*").removeClass("has-success has-error");
            $(ele).find(".help-block").text("");
        }

        //弹出预约座位的模态框
        $(document).on("click", ".resver button", function () {
            var seat_id = $(this).attr("seat_id");

            //清楚表单，重置（表单完整重置（表单的数据，样式））
            rest_form("#resverModal form");
            //将座位ID传入到保存按钮
            $("#save_btn").attr("seat_id", $(this).attr("seat_id"));
            $("#save_btn").attr("status", $(this).attr("status"));
            $('#seat_idval').val(seat_id);

            //弹出模块，静态、esc关闭
            $('#resverModal').modal({
                keyboard: true,
                backdrop: "static"
            })
        });

        /*
        * 发送请求，将状态置为1，已预约状态并插入数据  checkSeatResverUserID
        * */
        $(document).on("click","#save_btn",function(){
            var seat_ID2 = $(this).attr("seat_id");
            var userID = $('#userID_inpput').val();
            var status = $(this).attr('status');
            $.ajax({
                url: "/checkSeatResverUserID/"+userID,
                type: "GET",
                success: function (result) {
                    if (result.code == 100) {
                        updateSeatStateYY1(seat_ID2,status);
                    } else {
                        $("#info").text(result.extend.va_msg);
                        return false;
                    }
                }
            });
        })
        //发送请求，将状态置为1，已预约状态并插入数据
        function updateSeatStateYY1(seat_ID2,status) {
            var status1 =status;
            $.ajax({
                url: "/updateSeatStateYY",
                type: "PUT",
                data: {seatid: seat_ID2,status: status},
                success: function (result) {
                    if (result.code == 100) {
                        insertSeatResver(status1);
                    }
                }
            });
        }
        /*
        * 将预约信息插入到预约座位表中
        * */
        function insertSeatResver(status1){
            var userID = $('#userID_inpput').val();
            var seatID = $('#seat_idval').val();
            var b_time = $('#test5').val();
            var e_time = $('#test6').val();
            var b_time1 = new Date(Date.parse(b_time));
            var e_time1 = new Date(Date.parse(e_time));
            $.ajax({
                url: "/insertSeatResver",
                type: "POST",
                data:{userid:userID,seatid:seatID,btime:b_time1,etime:e_time1,status:status1},
                success: function (result) {
                    if (result.code == 100) {
                        insertSeatUserInfo(status1);
                        // $('#resverModal').modal('hide');
                        // window.location.reload();
                    }else {
                        $("#info").text("预约信息插入失败!");
                    }
                }
            });
        }
        function insertSeatUserInfo(status1){
            var userID = $('#userID_inpput').val();
            var seatID = $('#seat_idval').val();
            var b_time = $('#test5').val();
            var e_time = $('#test6').val();
            var b_time1 = new Date(Date.parse(b_time));
            var e_time1 = new Date(Date.parse(e_time));
            $.ajax({
                url: "/insertSUInfo",
                type: "POST",
                data:{userid:userID,seatid:seatID,begintime:b_time1,endtime:e_time1,status:status1},
                success: function (result) {
                    if (result.code == 100) {
                        $('#resverModal').modal('hide');
                        window.location.reload();
                    }else {
                        $("#info").text("预约信息插入失败!");
                    }
                }
            });
        }
        //日期格式
        Date.prototype.format = function(fmt) {
            var o = {
                "M+" : this.getMonth()+1,                 //月份
                "d+" : this.getDate(),                    //日
                "h+" : this.getHours(),                   //小时
                "m+" : this.getMinutes(),                 //分
                "s+" : this.getSeconds(),                 //秒
                "q+" : Math.floor((this.getMonth()+3)/3), //季度
                "S"  : this.getMilliseconds()             //毫秒
            };
            if(/(y+)/.test(fmt)) {
                fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
            }
            for(var k in o) {
                if(new RegExp("("+ k +")").test(fmt)){
                    fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
                }
            }
            return fmt;
        }


        //前端用户ID格式校验
        $("#userID_inpput").change(function () {
            var userID = $("#userID_inpput").val();
            var regex = new RegExp("(^\\d{1,4}$)");
            if (regex.test(userID) == false) {
                show_validate_msg("#userID_inpput", "error", "请输入数字");
                $("#save_btn").attr("ajax_userID", "error");
            }
            if (regex.test(userID) == true) {
                show_validate_msg("#userID_inpput", "success", " ");
                $("#save_btn").attr("ajax_userID", "success");
            }
        })
        //后端用户ID是否存在校验
        $("#userID_inpput").change(function () {
            var userID = $("#userID_inpput").val();
            //发送ajax，请求用户名是否可用
            $.ajax({
                url: "/checkUserID",
                type: "GET",
                data: "userid=" + userID,
                success: function (result) {
                    if (result.code == 100) {
                        show_validate_msg("#userID_inpput", "success", result.extend.va_msg);
                        // alert(result.extend.va_msg);
                        $("#save_btn").attr("ajax_userID", "success");
                    } else {
                        show_validate_msg("#userID_inpput", "error", result.extend.va_msg);
                        $("#save_btn").attr("ajax_userID", "error");
                    }
                }
            });
            if (userID != "") {
                $("#info").text("");
            }
        })

        /*
        * 点击取消预约按钮，删除该预约信息并且状态置为0（可预约） deleteSeatResver
        * */
        $(document).on('click','.deleteSeatResver button',function () {
            var seat_id = $(this).attr("seat_id");
            $.ajax({
                url:"/deleteSeatResver/"+seat_id,
                type:"DELETE",
                success:function (result) {
                    if (result.code == 100){
                        updateSeatState(seat_id);
                    }
                }
            })
        })
        function updateSeatState(seat_id){
            $.ajax({
                url:"/updateSeatState/"+seat_id,
                type:"PUT",
                success:function (result) {
                    if (result.code == 100){
                        window.location.reload();
                        // alert("删除成功！");
                    }
                }
            })
        }
    //点击用户信息按钮，弹出模态框
    $(document).on("click",".user_btn",function(){
        var userid = $(this).attr("user_id");
        getUser(userid);
        //弹出模块矿，静态、esc关闭
        $('#userModal').modal({
            keyboard:true,
            backdrop:"static"
        })
    });
    function getUser(userid){
        $.ajax({
            url:"/queryUserByID/"+userid,
            type:"GET",
            success:function(result){
                var user = result.extend.users;
                $('#userName').val(user.username);
                $('#userAge').val(user.userage);
                $('#userTel').val(user.usertel);
                $("#userGender").val(user.usergender=='M'?'男':'女');
            }
        });
    }

/****************************************************************laydate插件*************************/
    layui.use('laydate', function() {
        var laydate = layui.laydate;
        //年选择器
        laydate.render({
            elem: '#test2'
            , type: 'year'
        });
        //年月选择器
        laydate.render({
            elem: '#test3'
            , type: 'month'
        });
        //时间选择器
        laydate.render({
            elem: '#test4'
            , type: 'time'
        });
        //年月日选择，开始时间选择
        laydate.render({
            elem: '#test5'
            , type: 'datetime'
        });
        //年月日选择，结束时间选择
        laydate.render({
            elem: '#test6'
            , type: 'datetime'
        });
    })

    /********************************根据座位号查询该座位信息*****************************************/
    $(document).on('click','#queryBySeatID_btn',function () {
        if($('#queryBySeatID').val() == ""){
            $("#queryUserInfo").text("请输入座位号!");
            return false;
        }else {
            $("#queryUserInfo").text("");
        }
        var seatid = $('#queryBySeatID').val();
        $.ajax({
            url:"/querySeatlike/"+seatid,
            type:"GET",
            success:function(result) {
                if(result.code == 100){
                    //console.log();
                    //1.解析并显示员工数据
                    bulid_cp_table(result);
                    //2.显示分页信息
                    build_page_info(result);
                    //3.解析并显示分页信息
                    build_page_nav(result);
                    $("queryUserInfo").text("");
                }else {
                    $("#queryUserInfo").text("没有查到，请重新输入!");
                }
            }
        })
    })
    $(document).on('click','#queryAll',function () {
        to_page(1);
    })
</script>
</body>
</html>
